<template>
  <div>
    <el-row :gutter="20">
      <el-form
        label-width="120px"
        :model="terminalDialogForm"
        :rules="terminalDialogRules"
        ref="terminalDialogForm"
        :disabled="terminalDialog.disabled"
        >
        <el-col :span="12">
          <el-form-item label="类型:" prop="rptNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.rptNo"
              :placeholder="[!terminalDialog.disabled?'请选择类型':' ']"
              @change="rptNoListChange"
            >
              <el-option
                v-for="item in rptNoList"
                :key="item.rptNo"
                :label="item.rptName"
                :value="item.rptNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商:" prop="rpsNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.rpsNo"
              :placeholder="[!terminalDialog.disabled?'请选择供应商':' ']"
              @change="rpsNoListChange"
            >
              <el-option
                v-for="item in rpsNoList"
                :key="item.rpsNo"
                :label="item.rpsName"
                :value="item.rpsNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="型号:" prop="rpmNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.rpmNo"
              :placeholder="[!terminalDialog.disabled?'请选择型号':' ']"
              @change="rpmNoChange"
            >
              <el-option
                v-for="item in rpmNoList"
                :key="item.rpmNo"
                :label="item.rpmName"
                :value="item.rpmNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="服务商:" prop="serviceNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.serviceNo"
              :placeholder="[!terminalDialog.disabled?'请选择服务商':' ']"
              @change="serveChange"
            >
              <el-option
                v-for="item in serviceNoList"
                :key="item.serviceNo"
                :label="item.serviceName"
                :value="item.serviceNo"
              >
              <span style="float: left">{{ item.serviceName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.serviceNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="商户:" prop="rpiNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.rpiNo"
              :placeholder="[!terminalDialog.disabled?'请选择商户':' ']"
              @change="rpiNoListChange"
            >
              <el-option
                v-for="item in rpiNoList"
                :key="item.rpiNo"
                :label="item.rpiName"
                :value="item.rpiNo"
              >
              <span style="float: left">{{ item.rpiName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.rpiNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="门店/收银员:" prop="belongType">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.belongType"
              placeholder="请选择门店/收银员"
              @change="storeTypeChange"
            >
              <el-option
                v-for="item in storeType"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="门店:" prop="storeNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.storeNo"
              :placeholder="[!terminalDialog.disabled?'请选择门店':' ']"
              @change="storeNoChange"
            >
              <el-option
                v-for="item in storeNoList"
                :key="item.rpsNo"
                :label="item.rpsName"
                :value="item.rpsNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="terminalDialogForm.belongType=='1'">
          <el-form-item label="收银员:" prop="rpstNo">
            <el-select
              size="small"
              filterable
              v-model="terminalDialogForm.rpstNo"
              :placeholder="[!terminalDialog.disabled?'请选择收银员':' ']"
              @change="rpstNoChange"
            >
              <el-option
                v-for="item in rpstNoList"
                :key="item.rpstNo"
                :label="item.rpstName"
                :value="item.rpstNo"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="SN:" prop="rsSn">
            <el-input v-model="terminalDialogForm.rsSn" :placeholder="[!terminalDialog.disabled?'请输入SN':' ']" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="终端简称:" prop="rtName">
            <el-input v-model="terminalDialogForm.rtName" :placeholder="[!terminalDialog.disabled?'请输入终端简称':' ']" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-for="(rtParaItem,index) in terminalDialogForm.rtParaList" :key="index">
          <el-form-item
           :label="rtParaItem.name"
           :prop="'rtParaList.'+index+'.val'"
           >
           <!-- :rules="{ required: rtParaItem.required, message: `${rtParaItem.name}不能为空`, trigger: 'blur' }" -->

            <el-input :type="rtParaItem.typeKey" v-model="rtParaItem.val" :placeholder="[!terminalDialog.disabled?`请输入${rtParaItem.name}`:' ']" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="this.terminalDialog.type == 'view'">
          <el-form-item label="绑定时间:" prop="createTime">
            <el-input v-model="terminalDialogForm.createTime"  size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { getDictionary } from "@/api/system/dict";
import { getRpsNo,getrpmNo,getrpstNo,getstoreNo,queryModuleType,getrpiNo } from "@/api/rb-core/terminal/terminal";
export default {
  props: {
    terminalDialog: {
      type: Object
    },
    //类型
    rptNoList: {
      type: Array,
      default:function(){
        return []
      }
    },
    //服务商
    serviceNoList: {
      type: Array,
      default:function(){
        return []
      }
    },
    // 终端表单
    terminalDForm:{
      type: Object,
      default:function(){
        return {}
      }
    }
  },
  data() {
    /**
     * @desc: 修改这个页面,记得同步修改：posinfo/component/terminalDialog.vue
     */
    return {
      terminalDialogForm:{},
      terminalDialogRules:{
          rptNo:[
            { required: true, message: '类型不能为空', trigger: 'blur' }
          ],
          rpsNo:[
            { required: true, message: '供应商不能为空', trigger: 'blur' }
          ],
          rpmNo:[
            { required: true, message: '型号不能为空', trigger: 'blur' }
          ],
          serviceNo:[
            { required: true, message: '服务商不能为空不能为空', trigger: 'blur' }
          ],
          rpiNo:[
            { required: true, message: '商户不能为空不能为空', trigger: 'blur' }
          ],
          belongType:[
            { required: true, message: '门店/收银员不能为空', trigger: 'blur' }
          ],
          storeNo:[
            { required: true, message: '门店不能为空', trigger: 'blur' }
          ],
          rpstNo:[
            { required: true, message: '收银员不能为空', trigger: 'blur' }
          ],
          // rtPara:[
          //   { required: true, message: '扩展属性不能为空', trigger: 'blur' }
          // ],
          rsSn:[
            { required: true, message: 'SN不能为空', trigger: 'blur' }
          ],
          rtName:[
            { required: true, message: '终端简称不能为空', trigger: 'blur' }
          ]
      },
      rpiNoList:[],// 商户
      storeType:[],// 门店或收银员
      rpsNoList:[],// 供应商名称
      rpmNoList:[],// 型号
      storeNoList:[],// 门店
      rpstNoList:[],// 收银员
    };
  },
  methods: {
    // 字典
     doGetDicts() {
      // 门店或收银员
      getDictionary({ code: "belong_type" }).then((res) => {
        this.storeType = res.data.data;
      });
    },
    // 表单清空
    initEmpty() {
      this.$refs['terminalDialogForm'].resetFields();
      // this.$refs['terminalDialogForm'].terminalDialogForm = {};
      this.$refs['terminalDialogForm'].terminalDialogForm = {};
    },
    // 选择类型---获取供应商
    rptNoListChange(value){
      this.terminalDialogForm.rpsNo="";
      this.rpsNoList=[];
      this.terminalDialogForm.rpmNo="";
      this.rpmNoList=[];
      getRpsNo(-1,-1,{rptNo:value}).then((res)=>{
        this.rpsNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    // 选择供应商---获取型号
    rpsNoListChange(value){
      this.terminalDialogForm.rpmNo="";
      this.rpmNoList=[];
      getrpmNo(-1,-1,{rpmRpsNo:value}).then((res)=>{
        this.rpmNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    //选择服务商---获取商户
    serveChange(value){
      this.terminalDialogForm.rpiNo="";//商户
      this.rpiNoList=[];//商户
      this.terminalDialogForm.storeNo="";//门店
      this.storeNoList=[];//门店
      this.terminalDialogForm.rpstNo="";//收银员
      this.rpstNoList=[];//收银员
      getrpiNo(-1,-1,{serveNo:value}).then((res)=>{
        this.rpiNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    //选择商户---获取门店
    rpiNoListChange(value){
      this.terminalDialogForm.storeNo="";//门店
      this.storeNoList=[];//门店
      this.terminalDialogForm.rpstNo="";//收银员
      this.rpstNoList=[];//收银员
      getstoreNo(-1,-1,{rpiNo:value}).then((res)=>{
        this.storeNoList = res.data.data.records;
        this.$forceUpdate()
      })
    },
    // 选择型号
    rpmNoChange(value){
      queryModuleType(value).then((res)=>{
        if(JSON.stringify(res.data.data)==='{}'){
          this.terminalDialogForm.rtParaList=[];
          this.$message.error(res.data.msg)
          this.$forceUpdate()
        }else{
          this.$set(this.terminalDialogForm,'rtParaList',[]);
          let data = eval(res.data.data);
          this.terminalDialogForm.rtParaList=JSON.parse(JSON.stringify(data));
          this.$forceUpdate()
        }
      })
    },
    // 门店/收银员
    storeTypeChange(){
      /**
       * 0 门店
       * 1 收银员
       */
      this.terminalDialogForm.storeNo="";//门店
      this.terminalDialogForm.rpstNo="";//收银员
      this.rpstNoList=[];//收银员list
    },
    // 选择门店
    storeNoChange(rpsNo){
      if(this.terminalDialogForm.belongType=='1'){
        this.rpstNoList=[];//收银员list
        getrpstNo(-1,-1,{rpsNo}).then((res)=>{
          this.rpstNoList = res.data.data.records;
        })
        this.terminalDialogForm.rpstNo="";//收银员
      }
      this.$forceUpdate()
    },
    // 选择收银员 change 回调
    rpstNoChange(){
      this.$forceUpdate()
    }
  },
  watch:{
    terminalDialog: {
      handler() {
        if(this.terminalDialog.type!=='add'){
          this.terminalDForm.belongType=this.terminalDForm.belongType+'';
          this.terminalDialogForm=this.terminalDForm;
          let terminalDialogFormCopy=JSON.parse(JSON.stringify(this.terminalDForm));//备份请求数据

          this.rptNoListChange(terminalDialogFormCopy.rptNo)//获取供应商
          this.terminalDialogForm.rpsNo=terminalDialogFormCopy.rpsNo;

          this.rpsNoListChange(terminalDialogFormCopy.rpmRpsNo)//获取型号
          this.terminalDialogForm.rpmNo=terminalDialogFormCopy.rpmNo;

          this.serveChange(terminalDialogFormCopy.serviceNo)//选择服务商---获取商户
          this.terminalDialogForm.rpiNo=terminalDialogFormCopy.rpiNo;

          this.rpiNoListChange(terminalDialogFormCopy.rpiNo)//选择商户---获取门店
          this.terminalDialogForm.storeNo=terminalDialogFormCopy.storeNo;

          // 回显收银员
          if(this.terminalDialogForm.belongType=='1'){
            getrpstNo(-1,-1,{rpsNo:terminalDialogFormCopy.storeNo}).then((res)=>{
              this.rpstNoList = res.data.data.records;
            })
            this.terminalDialogForm.rpstNo=terminalDialogFormCopy.rpstNo;
          }

          // 回显 扩展属性
          if(this.terminalDialogForm.rtPara){
            this.terminalDialogForm.rtPara = JSON.parse(this.terminalDialogForm.rtPara);//扩展结果
            let data = eval(this.terminalDialogForm.romParam);
            this.terminalDialogForm.romParam = JSON.parse(JSON.stringify(data));//扩展

            this.$set(this.terminalDialogForm,'rtParaList',[]);
            this.terminalDialogForm.rtParaList = this.terminalDialogForm.romParam.map(itm=>{
              itm.val=this.terminalDialogForm.rtPara[itm.key];
              return itm
            })
            this.terminalDialogForm.rtParaList = JSON.parse(JSON.stringify(this.terminalDialogForm.romParam))
            this.$forceUpdate();
          }

          this.$forceUpdate();
        }
      },
      deep: true,
      immediate: true
    }
  },
  created(){
     this.doGetDicts();
  }

};
</script>

<style lang="scss" scoped>
/deep/ .el-select {
  width:100%
}
/deep/ .el-input.is-disabled .el-input__inner{
  background-color: #fff;
}
</style>
